<template>
   <div class="left">
      <p v-for="(item,index) in lis" :key="item.tag" :class="{active:curindex==index}" @click="$emit('change',index)">
          {{item.name}}<span v-if="item.totalCount">{{ item.totalCount }}</span>
      </p>
    </div>
</template>

<script>
export default {
    props:["lis","curindex"]
}
</script>

<style lang="less" scoped>
.left{
    width: 100px;
    background: #ddd;
    >p{
        width: 100%;    
        line-height: 40px;
        text-align: center;
        color: #999;
        >span{
            position:absolute;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #f00;
            color: #fff;
            text-align: center;
            line-height: 18px;
            font-size: 12px;
            transform: scale(.8);
        }
    }
}
.active{
    color: #000 !important;
    font-weight: bold;
    background: #fff;
}
</style>